<template>
    <div class="container">
        <v-toolBar
            :fullPath='postData.opera'
            :tableColumns='tableColumns'
            @changeLie='getChangeLie'
            @getSearchIPArr='getToolBarSearchIPArr'
            @getSearchIP='getToolBarSearchIP'>
        </v-toolBar>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="tableDataFn"
            border
            stripe
            :fit="true"
            style="width: 100%">
            <template v-for="(item) in tableColumns">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    align="center"
                    v-if="item.isShow"
                    :key="item.prop">
                    <template v-slot="scope">
                        <template v-if="item.format == 'available'">
                            <div>
                                <template v-if="scope.row[item.prop] == '3'">
                                    <el-tag type="danger" effect="dark">紧急</el-tag>
                                </template>
                                <template v-else-if="scope.row[item.prop] == '2'">
                                    <el-tag type="warning" effect="dark">普通</el-tag>
                                </template>
                                <template v-else>
                                    <el-tooltip class="item" effect="dark" :content="scope.row[item.prop]" placement="right">
                                        <el-tag type="success" effect="dark">提醒</el-tag>
                                    </el-tooltip>
                                </template>
                            </div>
                        </template>
                        <!-- <template v-else-if="item.format == 'OS_TYPE'">
                            <div v-if="scope.row[item.prop] == 'Linux'">
                                <el-tag 
                                    type="primary" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else-if="scope.row[item.prop] == 'Windows'">
                                <el-tag 
                                    type="success" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template> -->
                        <!-- <template v-else-if="item.format == 'CONN_TYPE'">
                            <div v-if="scope.row[item.prop] == 'ssh'">
                                <el-tag 
                                    type="primary" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else-if="scope.row[item.prop] == 'snmp'">
                                <el-tag 
                                    type="success" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template> -->
                        <template v-else>
                            <div>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <v-pagination
            :dataTotal="dataTotal" 
            :curPage="postData.curPage" 
            :pageSize="postData.pageSize" 
            @getCurPage="getPaginationCurPage"
            @getPageSize="getPaginationPageSize">
        </v-pagination>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js'
import vPagination from 'itemMonitorCom/Pagination.vue';
import tableColumns from './sqlWarningTableColumns.js';
import bus from 'common/bus.js';
import { GetItem } from "@/utils/dataStore";
export default {
    components: {
        vPagination
    },
    data() {
        return { 
            postData: {
                opera: 'mysqlalertlist',
                curPage: 1,
                pageSize: 5,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {}
            },
            tableData: [],
            dataTotal: 0,
            tableColumns: tableColumns,
            SearchIPArr: [],
            searchJson: {},
            SearchIP: '',
            timerName: 'MonitorInfoServerConnect',
            timerEventName: 'timerMonitorInfoServerConnect',
            timerInterval: 1000 * 60*5,
            loading: true,
            selectedMonID:''
        }
    },
    created() {
        
         GetItem(sessionStorage.getItem('PushId')).then(_ => {
      this.selectedMonID =_[0].articleAddress;
      this.postData.filters.ip =this.selectedMonID.IP ;
      this.getTableData();
    })
       
        
         
        

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {                
                this.getTableData();
            }
        });
    },
    mounted(){
        bus.$on("ItemMonitorServer",msg => {
            this.resetData();
            this.selectedMonID = msg;
            this.postData.filters.ip =this.selectedMonID.IP ;
            
            this.getTableData()
            
            
        })
    },
    computed: {
        postDataFn() {
            return {
                postData: JSON.stringify(this.postData)
            }
        },
        tableDataFn() {
            return this.tableData.filter((item) => {
                return item;
            });
        },
        // timerInterval(){
        //     return Number(this.$store.state.pageRefresh)*1000
        // }
    },
    methods: {
        getTableData(){
            this.loading = true;
            
            fetchData(
                this.postDataFn
            ).then((res) => {
                // console.log("===========");
                // console.log(res);
                this.dataTotal = res.dataTotal;
                this.tableData = res.data;
                
                this.loading = false;
            });
        },
        getPaginationCurPage(val) {
            this.postData.curPage = val;
            this.getTableData();
        },
        getPaginationPageSize(val) {
            // 分页大小改变之后，重置当前页码为 1
            this.postData.curPage = 1;
            this.postData.pageSize = val;

            this.getTableData();
        },
        getToolBarSearchIPArr(arr) {
            // 获取搜索IP关键字
            this.SearchIPArr = arr;

            this.postData.curPage = 1;
            if (this.SearchIPArr.length > 0) {
                this.postData.filters = {
                    ip: this.SearchIPArr
                };
            } else {
                this.postData.filters = {};
            }

            this.getTableData();
        },
        getToolBarSearchIP(str){
            // 获取搜索IP关键字
            this.SearchIP = str;
            this.postData.curPage = 1;
            this.postData.filters = {
                ip: this.SearchIP
            };
            this.getTableData();
        },
        getChangeLie(val) {
            // 遍历表格列
            this.tableColumns.map((item, index) => {
                // 列的显示隐藏状态改变
                item.isShow = val.includes(item.label);
            });
        },
        resetData(){
            this.dataTotal = 0;
                this.tableData = [];

        }
    },
    watch: {
        
    },
    beforeDestroy() {
        // 页面关闭前，移除定时器任务
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
}
</script> 

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
</style>